import { Table,  Space, Tag, Image, Switch } from 'antd';
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux'
import { getWaitgoFn, updateOnshelfFn } from './../../../api/drugs'
import TimeShow from './../../../components/TimeShow'

const Drugaudit = (props) => {
    const [druglist, setDruglist] = useState([])
    useEffect(() => {
        getWaitgoFn().then(res => {
            setDruglist(res.data.data)
        })
    }, [])
    const [selectedRowKeys, setSeletRowKeys] = useState([])
    const onSelectChange = (selectedRowKeys, selectedRow) => {
        setSeletRowKeys(selectedRowKeys);
    }
    const rowSelection = {
        selectedRowKeys, //当前页面选中的项
        onChange: onSelectChange, //获取选中的值
    }
    const columns = [
        {
            title: '药品名称',
            align: 'center',
            dataIndex: 'drugname',
        },
        {
            title: '列表图',
            align: 'center',
            dataIndex: 'listimg',
            render: (text, record, index) => {
                return <Image src={text} width={70}></Image>
            }
        },
        {
            align: 'center',
            title: '价格',
            dataIndex: 'drugPrice',
        },
        {
            align: 'center',
            title: '上架',
            dataIndex: 'isOntheshelf',
            render: (text, record, index) => {
                return <Switch
                    checked={text}
                    defaultChecked
                    onChange={(checked) => {
                        console.log(checked, index);
                        updateOnshelfFn({
                            drugid: record.drugid,
                            isOntheshelf: checked,
                        }).then((res) => {
                            console.log(res)
                            // const arr = activitys;
                            let arr = JSON.parse(JSON.stringify(druglist));
                            arr[index].isOntheshelf = checked;
                            setDruglist(arr);
                        });
                    }}
                />
            }
        },

        {
            align: 'center',
            title: '是否为处方',
            dataIndex: 'isPrescription',
            render: text => text ? <span>是</span> : <span>否</span>
        },
        {
            align: 'center',
            title: '审核状态',
            dataIndex: 'auditStatus',
            render: text => text === 0 ? <span>待审核</span> :''
        },
        {
            align: 'center',
            title: '库存',
            dataIndex: 'stock',
        },
        {
            align: 'center',
            title: '发布时间',
            dataIndex: 'createTime',
            render: (text, record, index) => {
                return TimeShow({ time: text })
            }
        },
        {
            align: 'center',
            title: '操作',
            render: (text, record, index) => {
                return <Space>
                    <Tag color="#f50" >查看</Tag>
                    <Tag color="#f50" >审核</Tag>
                </Space>
            }

        }
    ]

    const data = druglist
    return (
        <div>
            <h1>药品审核</h1>
            <div>
                <div className="drugman">
                    <span>数据列表</span>
                </div>
                <div className="Tabscss">
                    <Table
                        rowSelection={rowSelection}
                        columns={columns}
                        dataSource={data}
                        rowKey={record => record.drugid}
                    />
                </div>
            </div>

        </div>
    )
}
export default connect(state => ({//设置状态 获取这些值
    truename: state.getIn(['user', 'truename']) //获取用户名
}), dispatch => ({

}))(Drugaudit)

